<template>
	<view class="classify-content">
		<scroll-view scroll-y class="left-scroll-view">
			<block v-for = "(item,index) in sidebarList" :key = 'index'>
				<view :class = "['left-scroll-view-item' , index === active ? 'active' : '']" @click='changeActive(index)'>
					{{item.cat_name}}
				</view>
			</block >
		</scroll-view>
		<scroll-view scroll-y class="right-scroll-view">
			<view class="right-scroll-view-item" v-for = "(item,index) in sidebarList[active].children" :key = 'index'>
				<view class="title">/ {{item.cat_name}} /</view>
				<view class="classify-content">
					<view class="classify-detail" v-for="(item,j) in sidebarList[active].children[index].children" :key="j">
						<image :src="item.cat_icon" mode="" />
						<view class="cat-name">{{item.cat_name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sidebarList: [],
				active: 0
			}
		},
		onLoad() {
			this.getSidebarList()
		},
		methods: {
			//获取分类列表
			async getSidebarList() {
				const { data : res } = await uni.$http.get('/api/public/v1/categories')
				if( res.meta.status == 200) {
					this.sidebarList = res.message
				}
			},
			changeActive(index) {
				this.active = index
			}
		}
	}
</script>

<style lang="less" scoped>
.classify-content {
	width: 100%;
	display: flex;
	.left-scroll-view {
		width: 280rpx;
		height: 100vh;
		.left-scroll-view-item {
			width: 100%;
			height: 120rpx;
			font-size: 12px;
			text-align: center;
			line-height: 120rpx;
			background: rgb(245, 244, 244);
			&.active {
				background: rgb(255, 255, 255);
				position: relative;
				&::before {
					content: ' ';
					display: block;
					width: 5rpx;
					height: 40rpx;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					background: #ff0000;
				}
			}
		}
	}
	.right-scroll-view {
		height: 100vh;
		.right-scroll-view-item {
			.title {
				height: 100rpx;
				font-size: 12px;
				text-align: center;
				line-height: 120rpx;		
			}
			.classify-content {
				display: block;
				.classify-detail {
					width: 120rpx;
					height: 160rpx;
					margin: 10rpx 30rpx;
					display: inline-block;
					image {
						width: 120rpx;
						height: 120rpx;
					}
					.cat-name {
						width: 120rpx;
						height: 40rpx;	
						font-size: 10px;
					}
				}				
			}
		}
	}
}
</style>
